<template>
  <a-modal title="更改角色" v-model:open="open" :width="360">
    <a-form>
      <a-form-item help="下拉选择权限角色">
        <a-select
          placeholder="请选择角色"
          style="width: 100%"
          v-model:value="form.role_id"
        >
          <a-select-option v-for="item in roles" :value="item.id">
            <a-tag :color="item.style">{{item.role_name}}</a-tag>
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {reactive, ref, watch} from 'vue'
import {roleList} from "@/api/modules/permission";

const props = defineProps({member: Object})

const roles = ref([])
const form = reactive({
  role_id: undefined,
  user_id: undefined,
  enterprise_id: undefined,
})
const open = defineModel('open')
const getRoles = async () => {
  const {data} = await roleList()
  roles.value = data
}
watch(()=>props.member,()=>{
  if(props.member){
    form.role_id = props.member.role_id
    form.user_id = props.member.user_id
    form.enterprise_id = props.member.enterprise_id
    getRoles()
  }
})
</script>

<style scoped>

</style>